<template>
  <div class="emr-content-module module-past-history">
    <div class="h3">
      既往史
      <el-popover placement="right" title="既往史" :width="300" trigger="hover">
        <div>
          1. 孩子以前有没有患过什么疾病？有没有因为比较严重的肺炎需要住院治疗？
        </div>
        <div>
          2.
          孩子会不会吃什么药物或食物过敏？比如：吃牛奶、鸡蛋、虾、蟹等后出皮疹、咳嗽、气喘，或腹痛腹泻？
        </div>
        <div>
          3.
          孩子会不会闻到某种气味、进入阴暗潮湿房间或铺地毯的房间、或者与宠物玩耍时出现咳喘？
        </div>
        <div>
          4.
          孩子患过湿疹（即是奶藓）吗？或者有无经常出皮疹？有无去看过医生，医生说是湿疹吗？
        </div>
        <div>
          5. 孩子有没有经常流清鼻涕、阵发性连续多个喷嚏、鼻塞、揉眼睛揉鼻子？
          以前有没有医生告诉过你孩子有“过敏性鼻炎”？
        </div>
        <div>6. 孩子睡眠时会不会经常鼻塞、打呼噜、张开嘴巴呼吸？</div>
        <div>7. 孩子有没有做过过敏原检查？查到哪一些过敏原过敏？</div>
        <template #reference>
          <svg-icon icon-class="question" />
        </template>
      </el-popover>
    </div>

    <div class="content-wrapper" :class="{ locked: d.disabled }">
      <div>
        曾患疾病:重症肺炎
        <el-radio-group
          v-model="d.pastHistory.hasPneumonia"
          @click="clear('otherDisease')"
        >
          <el-radio label="0" :disabled="d.disabled">无</el-radio>
          <el-radio label="1" :disabled="d.disabled">有</el-radio>
        </el-radio-group>

        <el-input
          v-if="d.pastHistory.hasPneumonia === '1'"
          v-model="d.pastHistory.otherDisease"
          size="medium"
          :disabled="d.disabled"
          placeholder="输入其它疾病"
          maxlength="50"
          style="width: 360px"
        ></el-input>
      </div>
      <div>
        药物食物过敏史:
        <el-radio-group
          @change="clear('allergyHistoryRemark')"
          v-model="d.pastHistory.allergyHistory"
        >
          <el-radio size="medium" label="0" :disabled="d.disabled">无</el-radio>
          <el-radio size="medium" label="1" :disabled="d.disabled">有</el-radio>
          <el-input
            size="medium"
            v-model="d.pastHistory.allergyHistoryRemark"
            :disabled="d.disabled"
            maxlength="50"
            placeholder="过敏药物、食物"
            v-if="d.pastHistory.allergyHistory == '1'"
            style="width: 240px"
          ></el-input>
        </el-radio-group>
      </div>

      <div>
        吸入过敏原过敏史:
        <el-radio-group
          v-model="d.pastHistory.hasOthersAllergy"
          @change="clear('othersAllergy')"
        >
          <el-radio label="0" :disabled="d.disabled">无</el-radio>
          <el-radio label="1" :disabled="d.disabled">有</el-radio>
        </el-radio-group>
        <el-input
          v-model="d.pastHistory.othersAllergy"
          v-if="d.pastHistory.hasOthersAllergy === '1'"
          class="supplement-content-width"
          placeholder="输入物品名称"
          size="medium"
          :disabled="d.disabled"
          style="width: 240px"
          maxlength="50"
        ></el-input>
      </div>

      <div>
        是否曾有奶藓(婴儿湿疹):
        <el-radio-group v-model="d.pastHistory.dermatitis">
          <el-radio size="medium" label="0" :disabled="d.disabled">无</el-radio>
          <el-radio size="medium" label="1" :disabled="d.disabled">有</el-radio>
        </el-radio-group>

        有否经常起荨麻疹(风团)
        <el-radio-group v-model="d.pastHistory.rash">
          <el-radio size="medium" label="0" :disabled="d.disabled">无</el-radio>
          <el-radio size="medium" label="1" :disabled="d.disabled">有</el-radio>
        </el-radio-group>
        ，
      </div>

      <div>
        是否经常流涕、连续喷嚏、鼻痒、鼻塞：
        <el-radio-group
          v-model="d.pastHistory.hasNasitisSydrome"
          @change="clear('nasitisSydromeDetail')"
        >
          <el-radio size="medium" label="0" :disabled="d.disabled">无</el-radio>
          <el-radio size="medium" label="1" :disabled="d.disabled">有</el-radio>
        </el-radio-group>

        <el-radio-group
          v-if="d.pastHistory.hasNasitisSydrome === '1'"
          v-model="d.pastHistory.nasitisSydromeDetail"
        >
          <el-radio size="medium" label="clearMucus" :disabled="d.disabled">
            清水涕
          </el-radio>
          <el-radio size="medium" label="yellowMucus" :disabled="d.disabled">
            黄脓涕
          </el-radio>
        </el-radio-group>
      </div>

      <div>
        是否曾被医生诊断为过敏性鼻炎：
        <el-radio-group v-model="d.pastHistory.nasitis">
          <el-radio size="medium" label="0" :disabled="d.disabled">无</el-radio>
          <el-radio size="medium" label="1" :disabled="d.disabled">有</el-radio>
        </el-radio-group>
      </div>

      <div>
        有否经常眼痒、揉眼睛、眨眼
        <el-radio-group v-model="d.pastHistory.eyeDiscomfort">
          <el-radio size="medium" label="0" :disabled="d.disabled">无</el-radio>
          <el-radio size="medium" label="1" :disabled="d.disabled">有</el-radio>
        </el-radio-group>
        ， 睡眠后有否鼻塞、打鼾、张口呼吸
        <el-radio-group v-model="d.pastHistory.nasalCongestion">
          <el-radio size="medium" label="0" :disabled="d.disabled">无</el-radio>
          <el-radio size="medium" label="1" :disabled="d.disabled">有</el-radio>
        </el-radio-group>
        <el-input
          size="medium"
          type="textarea"
          :disabled="d.disabled"
          placeholder="补充内容,限制100个字符以内 "
          :maxlength="100"
          :autosize="{ minRows: 1, maxRows: 4 }"
          v-model="d.pastHistory.others"
          style="margin-top: 0.5rem"
        ></el-input>
      </div>
    </div>
  </div>
</template>
<script>
  import { reactive, inject } from 'vue'
  import { initPastHistory } from './initTools'
  export default {
    setup() {
      const d = reactive({ disabled: false, pastHistory: initPastHistory() })
      const clearValue = inject('clearValue')

      const clear = function (val) {
        clearValue(d.pastHistory, val)
      }
      const getData = function () {
        return d.pastHistory
      }
      return {
        d,
        clear,
        getData,
      }
    },
  }
</script>
<style lang="scss" scoped>
  @import '@/styles/emr.scss';
</style>
